<%@ page contentType="text/html;charset=UTF-8" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="CSS/Login_Register.css">
</head>
<body>
<h1 id="greeting" class="text-font">Hello</h1>
<div class="container login_Image">
    <!-- 注册 -->
    <div class="container-form container-signup">
        <div>
            <form action="RegisterServlet" method="post" class="form">
                <div class="inputBox"><input type="text" id="username"
                                             name="username" required><span>姓名/Username</span></div>
                <br>
                <div class="inputBox"><input type="text" id="phoneNumber"
                                             name="phoneNumber" required><span>手机号/PhoneNumber</span>
                </div>
                <br>
                <div class="inputBox"><input type="text" id="VerificationCode1" name="VerificationCode1"
                                             onclick="RegisterShowCodePopup()"
                                             required><span>验证码/VerificationCodeInput</span></div>
                <br>
                <div class="inputBox"><input type="password" id="password" name="password"
                                             required><span>密码/Password</span></div>
                <br>
                <button type="submit" class="button" id="generatedCode2" name="generatedCode2"
                        onclick="RegisterSubmitForm()">点击注册
                </button>
                <button onclick="clearForm()" class="button">一键清空</button>
            </form>
        </div>
    </div>

    <!-- 登录 -->
    <div class="container-form container-signIn">
        <div>
            <div class="login-app">
                <input type="radio" name="opt" id="msg" checked="checked">
                <label for="msg" class="m-btn">短信登录</label>

                <input type="radio" name="opt" id="uname">
                <label for="uname" class="u-btn">账号登录</label>

                <input type="radio" name="opt" id="code">
                <label for="code" class="q-btn">扫码登录</label>

                <div id="form-bar">
                    <form action="MessageLogin" method="post" class="m-form">
                        <form class="form">
                            <div class="inputBox"><input type="text" id="phoneNumber3"
                                                         name="phoneNumber3" required><span>手机号/PhoneNumber</span>
                            </div>
                            <br>
                            <div class="inputBox"><input type="text" id="VerificationCode" name="VerificationCode"
                                                         onclick="showCodePopup()" required><span>验证码/VerificationCodeInput</span>
                            </div>
                            <br>
                            <button type="submit" class="button" id="generatedCode" name="generatedCode"
                                    onclick="submitForm()">登录
                            </button>
                            <br><br>
                            <button onclick="clearForm()" class="button">一键清空</button>
                            <br><br><br></form>
                    </form>
                    <form action="Servlet" method="post" class="u-form">
                        <form class="form">
                            <div class="inputBox"><input type="text" id="phoneNumber2"
                                                         name="phoneNumber2" required><span>手机号/PhoneNumber</span>
                            </div>
                            <br>
                            <div class="inputBox"><input type="password" id="password2" name="password2"
                                                         required><span>密码/Password</span></div>
                            <br>
                            <a href="TransitionInterface.html" class="link" align="center">忘记密码?</a><br><br>
                            <button type="submit" class="button">登录</button>
                            <br><br>
                            <button onclick="clearForm()" class="button">一键清空</button>
                            <br><br><br>
                        </form>
                    </form>
                    <form class="q-form">
                        <div class="card" id="card">
                            <div class="front">
                                <p>添加微信</p>
                            </div>
                            <div class="back">
                                <img src="photo/friend.jpg" alt="Your Image" id="cardImage">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="container-overlay">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <button class="button" id="signIn">
                    已有账号，直接登录
                </button>
            </div>
            <div class="overlay-panel overlay-right">
                <button class="button" id="signUp">
                    没有账号，点击注册
                </button>
            </div>
        </div>
    </div>
</div>
<iframe src="IndexPlugin.html" width="100%" height="20%"></iframe>
</body>
<script>
    // document.documentElement.style.transform = "scale(1.5)";
    const signInBtn = document.getElementById("signIn");
    const signUpBtn = document.getElementById("signUp");
    const container = document.querySelector(".container");

    signInBtn.addEventListener("click", () => {
        container.classList.remove("panel-active");
    });

    signUpBtn.addEventListener("click", () => {
        container.classList.add("panel-active");
    });
    const card = document.getElementById('card');
    const cardImage = document.getElementById('cardImage');

    card.addEventListener('click', function () {
        card.classList.toggle('flipped');
        if (card.classList.contains('flipped')) {
            cardImage.src = 'your-new-image.jpg';
        } else {
            cardImage.src = '';
        }
    });
    let lastPopupTime = 0; // 上次弹窗时间
    let lastPopupTime2 = 0; // 上次弹窗时间

    let RandomVerificationCode;
    let RegisterRandomVerificationCode;

    // 生成6位随机验证码
    function generateRandomCode() {
        let code = '';
        const characters = '0123456789';
        for (let i = 0; i < 6; i++) {
            const randomIndex = Math.floor(Math.random() * characters.length);
            code += characters.charAt(randomIndex);
        }
        return code;
    }

    // 复制验证码到剪贴板
    function copyCodeToClipboard(code) {
        const textArea = document.createElement("textarea");
        textArea.value = code;
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand('copy');
        document.body.removeChild(textArea);
    }

    // 显示验证码弹窗
    function showCodePopup() {
        const phoneNumber = document.getElementById('phoneNumber3').value; // 获取手机号输入框的值
        if (!phoneNumber) {
            alert('请输入手机号以获取验证码。');
            return;
        }
        const currentTime = Date.now(); // 当前时间
        let count = 0;
        if (currentTime - lastPopupTime >= 60000) { // 检查是否已经过去60秒
            const generatedCode = generateRandomCode();
            const popupMessage = '验证码: ' + generatedCode;
            RandomVerificationCode = generatedCode;
            // 创建弹窗
            const confirmation = confirm(popupMessage + "\n\n点击确定将验证码复制到剪贴板。");

            if (confirmation) {
                copyCodeToClipboard(generatedCode); // 复制验证码
            }

            lastPopupTime = currentTime; // 更新上次弹窗时间
        } else {
            if (count.equals(0)) {
                alert('请等待60秒后再次获取验证码。');
                count = 1
            }
        }
    }

    function RegisterShowCodePopup() {
        const phoneNumber = document.getElementById('phoneNumber').value; // 获取手机号输入框的值
        if (!phoneNumber) {
            alert('请输入手机号以获取验证码。');
            return;
        }
        const currentTime = Date.now(); // 当前时间
        let count = 0;
        if (currentTime - lastPopupTime2 >= 60000) { // 检查是否已经过去60秒
            const generatedCode = generateRandomCode();
            const popupMessage = '验证码: ' + generatedCode;
            RegisterRandomVerificationCode = generatedCode;
            // 创建弹窗
            const confirmation = confirm(popupMessage + "\n\n点击确定将验证码复制到剪贴板。");

            if (confirmation) {
                copyCodeToClipboard(generatedCode); // 复制验证码
            }
            lastPopupTime2 = currentTime; // 更新上次弹窗时间
        } else {
            if (count.equals(0)) {
                alert('请等待60秒后再次获取验证码。');
                count = 1
            }
        }
    }

    function clearForm() {
        document.getElementById('phoneNumber2').value = '';
        document.getElementById('password2').value = '';

        document.getElementById('username').value = '';
        document.getElementById('phoneNumber').value = '';
        document.getElementById('password').value = '';
    }

    window.onload = function () {
        const greetingElement = document.getElementById("greeting")
        const greetings = [{text: "Hello", color: "rgb(0,159,255)"},
            {text: "你好", color: "rgb(255,0,6)"},
            {text: "привет", color: "green"},
            {text: "Bonjour", color: "orange"},
            {text: "Hallo", color: "purple"},
            {text: "こんにちは", color: "pink"},
            {text: "Hola", color: "brown"},
            {text: "Здравствуйте", color: "gray"},
            {text: "नमस्ते", color: "teal"},
            {text: "안녕하세요", color: "violet"},
            {text: "Ciao", color: "gold"},];
        let currentGreetingIndex = 0

        function changeGreeting() {
            greetingElement.style.opacity = "0"
            setTimeout(function () {
                greetingElement.textContent = greetings[currentGreetingIndex].text
                greetingElement.webkitTextStroke = greetings[currentGreetingIndex].color
                greetingElement.style.opacity = "1"
                currentGreetingIndex = (currentGreetingIndex + 1) % greetings.length
            }, 500)
        }

        changeGreeting()
        setInterval(changeGreeting, 2000)
    }

    function RegisterSubmitForm() {
        document.getElementById('generatedCode2').value = RegisterRandomVerificationCode;
        document.submit();
    }

    function submitForm() {
        document.getElementById('generatedCode').value = RandomVerificationCode;
        document.submit();
    }

</script>
</html>